import 'dart:async';

import 'package:flutter/material.dart';
import '../services/ScreenAdapter.dart';
import '../services/TLSizeFit.dart';

import '../YColors.dart';

class LoginCode extends StatefulWidget {
  LoginCode({
    Key key,
  }) : super(key: key);

  _LoginCodeState createState() => _LoginCodeState();
}

class _LoginCodeState extends State<LoginCode> {
  TextEditingController _controller_phone = new TextEditingController();
  TextEditingController _controller_code = new TextEditingController();

  /*
   * 手机号码中删除的图标显示的标记
   */
  bool flagShowDeleteImg = false;
  String phoneNumber = "";
  String codeStr = "";

  /*
   * 密码中删除的图标显示的标记
   */
  bool flagCodeDeleteImg = false;

  /*
   * 密码中是否隐藏输入密码显示的标记
   */
  bool flagSeeImg = true;

  int seconds = 20;

  bool sendFlag = true;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    TLSizeFit.initialize();
    ScreenAdapter.init(context);

    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        // 标题居中
        elevation: 0,
        //隐藏底部阴影分割线
//        title: Text(
//          "登录",
//          style: TextStyle(color: YColors.r, fontSize: 18),
//        ),
        backgroundColor: Colors.white,
        // 设置背景色

        leading: IconButton(
          icon: Image.asset(
            "images/return_back.png",
            width: 20,
            height: 20,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
      body: Container(
        color: YColors.t,
        height: double.infinity,
        padding:
            EdgeInsets.fromLTRB(TLSizeFit.setPx(20), 0, TLSizeFit.setPx(20), 0),
        child: setBodyView(),
      ),
    );
  }

  Widget setBodyView() {
    return Container(
      child: Column(
        children: <Widget>[
          SizedBox(
            height: TLSizeFit.setPx(50),
          ),
          _PhoneView(),
          /**
           * 线
           * */
          Container(
            margin: EdgeInsets.only(top: 0),
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        color: YColors.dividerGreenColor, width: 0.3)),
                color: Colors.white),
          ),
          CodeView(),
          /**
           * 线
           * */
          Container(
            margin: EdgeInsets.only(top: 0),
            decoration: BoxDecoration(
                border: Border(
                    top: BorderSide(
                        color: YColors.dividerGreenColor, width: 0.3)),
                color: Colors.white),
          ),
          SizedBox(
            height: TLSizeFit.setPx(20),
          ),
          InkWell(
            child: Container(
              margin: EdgeInsets.fromLTRB(TLSizeFit.setPx(10),
                  TLSizeFit.setPx(20), TLSizeFit.setPx(10), 0),
              alignment: Alignment.center,
              height: TLSizeFit.setPx(48),
              child: Text(
                "登 录",
                style: TextStyle(fontSize: 18, color: YColors.t),
              ),
              decoration: BoxDecoration(
                color: YColors.m,
                borderRadius: BorderRadius.all(// 圆角
                    //  Radius.circular(150),    //圆形
                    Radius.circular(60) // 圆角 zj
                    ),
              ),
            ),
            onTap: () {
              print(phoneNumber);
              print(codeStr);

//              _loginAllData();
            },
          ),
        ],
      ),
    );
  }

  /**
   * 输入手机号的布局
   * */
  Widget _PhoneView() {
    return Container(
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              controller: _controller_phone,
              cursorColor: YColors.m,
              // 光标的颜色
              style: TextStyle(
                fontSize: 16,
                color: YColors.b,
              ),
              keyboardType: TextInputType.phone,
              onChanged: (value) {
                if (value.length > 0) {
                  phoneNumber = value;
                  setState(() {
                    flagShowDeleteImg = true;
                  });
                }
              },
              maxLength: 11,
              decoration: InputDecoration(
                hintText: "手机号码",
                hintStyle:
                    TextStyle(fontSize: 16, color: YColors.textColorHint),
                border: InputBorder.none, // 去掉下滑线
                counterText: '', // 去除输入框底部的字符计数
//                        contentPadding: EdgeInsets.only(top: 0, bottom: -6),//设置文字内容与边框距离
//                         enabledBorder: UnderlineInputBorder(
//                           borderSide: BorderSide(
//                               color: YColors.dividerColor,
//                               width: 0.3), // 默认的下划线的颜色
//                         ),
//                         focusedBorder: UnderlineInputBorder(
//                           borderSide: BorderSide(
//                               color: Color(0xff12BF68),
//                               width: 0.3), // 选中后下划线的颜色
//                         )
              ),
            ),
          ),
          flagShowDeleteImg
              ? InkWell(
                  child: Container(
                    margin: EdgeInsets.only(right: 8),
                    child: Image.asset(
                      "images/cancel_order.png",
                      width: TLSizeFit.setPx(16),
                      height: TLSizeFit.setPx(16),
                    ),
                  ),
                  onTap: () {
                    _controller_phone.clear();
                    setState(() {
                      flagShowDeleteImg = false;
                    });
                  },
                )
              : Container(),
        ],
      ),
    );
  }

  /**
   * 验证码的布局
   */
  Widget CodeView() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, TLSizeFit.setPx(1), 0, TLSizeFit.setPx(4)),
      child: Row(
        children: <Widget>[
          Expanded(
            child: TextField(
              obscureText: false,
              // 验证码
              controller: _controller_code,
              cursorColor: YColors.m,

              // 光标的颜色
              style: TextStyle(
                fontSize: 16,
                color: YColors.b,
              ),
              keyboardType: TextInputType.phone,
              onChanged: (value) {
                if (value.length > 0) {
                  codeStr = value;
                  setState(() {
                    flagCodeDeleteImg = true;
                  });
                }
              },
              maxLength: 4,
              decoration: InputDecoration(
                hintText: "验证码",
                hintStyle:
                    TextStyle(fontSize: 16, color: YColors.textColorHint),
                border: InputBorder.none, // 去掉下滑线
                counterText: '', // 去除输入框底部的字符计数
              ),
            ),
          ),

          /**
           * 删除的按钮图标
           * */
          flagCodeDeleteImg
              ? InkWell(
                  child: Container(
                    margin: EdgeInsets.only(right: TLSizeFit.setPx(16)),
                    child: Image.asset(
                      "images/cancel_order.png",
                      width: TLSizeFit.setPx(16),
                      height: TLSizeFit.setPx(16),
                    ),
                  ),
                  onTap: () {
                    _controller_code.clear();
                    setState(() {
                      flagCodeDeleteImg = false;
                    });
                  },
                )
              : Container(),

          Container(
              height: TLSizeFit.setPx(30),
//      margin: EdgeInsets.only(left: ScreenAdapter.width(30)),
              padding: EdgeInsets.only(left: TLSizeFit.setPx(5)),
              decoration: BoxDecoration(
                  border: Border(
                      left: BorderSide(
                color: YColors.m,
                width: TLSizeFit.setPx(0.5),
              )))),

          this.sendFlag
              ? InkWell(
                  child: Container(
                    width: TLSizeFit.setPx(100),
                    alignment: Alignment.center,
                    child: Text(
                      "发送验证码",
                      style: TextStyle(
                          fontSize: TLSizeFit.setPx(14), color: YColors.b),
                    ),
                  ),
                  onTap: () {
                    print("发送验证码了");
                    _showTimer();
                    setState(() {
                      sendFlag = !sendFlag;
                    });
                  },
                )
              : Container(
                  width: TLSizeFit.setPx(100),
                  alignment: Alignment.center,
                  child: Text("${this.seconds}秒"),
                ),

          /**
           * 密码是否显示的按钮图标
           * */
//          InkWell(
//            child: Container(
//              margin: EdgeInsets.only(right: TLSizeFit.setPx(8)),
//              child: flagSeeImg
//                  ? Image.asset(
//                "images/ic_password_normal.png",
//                width: TLSizeFit.setPx(24),
//                height: TLSizeFit.setPx(24),
//              ) //ic_password_show
//                  : Image.asset(
//                "images/ic_password_show.png",
//                width: TLSizeFit.setPx(24),
//                height: TLSizeFit.setPx(24),
//              ),
//            ),
//            onTap: () {
//              setState(() {
//                flagSeeImg = !flagSeeImg;
//              });
//            },
//          ),
        ],
      ),
    );
  }

  //倒计时
  _showTimer() {
    Timer t;
    t = Timer.periodic(Duration(milliseconds: 1000), (timer) {
      setState(() {
        this.seconds--;
      });
      if (this.seconds == 0) {
        t.cancel(); //清除定时器
        setState(() {
          this.sendFlag = true;
          this.seconds = 60;
        });
      }
    });
  }
}
